<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="visible" width="1060px" v-if="visible" append-to-body
      :close-on-click-modal="false">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="行业类型：" prop="shopTypeId">
          <el-cascader filterable :options="typeLs" @change="handleChange" v-model="shopTypeIdLs" size="small"
            :props="{ value: 'id',label: 'label',children: 'children', checkStrictly: true}" />
        </el-form-item>
        <el-form-item label="神椰店铺行业：" prop="shenyeIndustryId">
          <el-select filterable v-model="queryParams.shenyeIndustryId" placeholder="请选择" size="small"
            style="width: 240px">
            <el-option v-for="item in shenyeIndustryList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商户级别：" prop="merchantLevel">
          <el-select filterable v-model="queryParams.merchantLevel" placeholder="全部" size="small" style="width: 240px">
            <el-option v-for="item in merchantLevelList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字：" prop="keyword">
          <el-input v-model="queryParams.keyword" placeholder="店铺名称/商户账号名称/手机号" clearable size="small"
            style="width: 240px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery" size="small">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery" size="small">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" style="margin-bottom: 20px" size="small" :loading="saveLoading" :disabled="productIds.length==0?true:false" @click="submitForm">
        批量添加</el-button>
      <el-table ref="multipleTable" v-loading="loading" :data="tableList" stripe border row-key="shenyeShopId"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" :reserve-selection="true" width="55" fixed="left">
        </el-table-column>
        <el-table-column label="序号" align="center" type="index" width="64px" />
        <el-table-column label="店铺名称" align="center" prop="shopName" :show-overflow-tooltip="true" />
        <el-table-column label="商户账户名称" align="center" prop="merchantName" width="120" :show-overflow-tooltip="true" />
        <el-table-column label="手机号" align="center" prop="phone" width="120" />
        <el-table-column label="管辖区域" align="center" prop="govAreaName" />
        <el-table-column label="所属地区" align="center" prop="merchantArea" />
        <el-table-column label="行业类型" align="center" prop="shopTypeName" />
        <el-table-column label="神椰店铺行业" align="center" prop="shenyeIndustryName" width="120" />
        <el-table-column label="商户级别" align="center" prop="merchantLevel" />
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :autoScroll="false"
        :limit.sync="queryParams.pageSize" @pagination="getList" />
    </el-dialog>
  </div>
</template>

<script>
  // api
  import {
    shopTypeTree,
  } from "@/api/merchants";
  import {
    industrySelect,
  } from "@/api/merchants/merchantsAudit";
  import {
    shopSelectList,
    activityShopTempAdd
  } from '@/api/consumeIncentiveManagement/incentiveActivities'
  export default {
    // dicts: ['asset_card_type'],
    name: "Dialog",
    data() {
      return {
        labelWidth: '120px',
        inputWidth: '280px',
        loading: false,
        id: '', //
        saveLoading: false,
        // 是否禁用
        disabled: false,
        stopDisabled: true,
        // 弹出层标题
        title: "添加活动店铺",
        typeLs: [], //行业类型
        shopTypeIdLs: [],
        shenyeIndustryList: [], //神椰店铺行业列表
        merchantLevelList: [{
            id: '',
            value: '全部'
          },
          {
            id: '1',
            value: '未使用商家'
          },
          {
            id: '2',
            value: '合作商家'
          },
          {
            id: '3',
            value: '普通商家'
          },
          {
            id: '4',
            value: '诚信商家'
          },
          {
            id: '5',
            value: '金牌商家'
          },
        ],
        // 是否显示弹出层
        visible: false,
        // 总条数
        total: 0,
        // 表格数据
        tableList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          govAreaId: '', //管辖区域id
          incentiveActivityId: '', //激励活动id
          keyword: '', //关键字(店铺名称/商户账号名称/手机号)
          merchantLevel: '', //商户级别 1 未使用商家 2 合作商家 3普通商家 4诚信商家 5金牌商家
          shenyeIndustryId: '', //神椰店铺行业id
          shopTypeId: '', //行业类型id
          shopTypeParentId: '', //行业父类型id
          // shopIdList:[],//过滤店铺id列表)
        },
        productIds: [], // 选中数组
      };
    },
    created() {

    },
    methods: {
      /** 打开发行管理弹框 */
      open(govAreaId, incentiveActivityId) {
        console.log(govAreaId,incentiveActivityId)
        this.queryParams.govAreaId = govAreaId
        this.queryParams.incentiveActivityId = incentiveActivityId
        // this.queryParams.shopIdList = shopIdList
        this.getTypels()
        this.getIndustrySelect()
        this.getList()
        console.log(this.queryParams)
        this.visible = true
      },
      // 取消按钮
      cancel() {
        this.visible = false;
        this.reset();
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        shopSelectList(this.queryParams).then(response => {
          this.tableList = response.result.records;
          this.total = response.result.total;
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        })
      },
      // 获取行业类型
      getTypels() {
        this.loading = true;
        shopTypeTree()
          .then((res) => {
            this.typeLs = res.result;
            this.typeLs.forEach((item) => {
              item.children.forEach((items) => {
                if (items.children.length == 0) {
                  items.children = null
                }
              })
            })
          })
          .finally(() => {});
      },
      //行业选择
      handleChange(value) {
        let _this = this;
        console.log(value);
        if (value.length == 2) {
          _this.queryParams.shopTypeId = value[1];
          _this.queryParams.shopTypeParentId = value[0];
        } else {
          _this.queryParams.shopTypeParentId = value[0];
          _this.queryParams.shopTypeId = '';
        }
      },
      //获取神椰行业
      getIndustrySelect() {
        var params = {}
        industrySelect(params).then(res => {
          var arr = [{
            id: "",
            value: "全部",
          }, ];
          this.shenyeIndustryList = arr.concat(res.result)
        })
      },
      /** 多选框选中数据 */
      handleSelectionChange(selection) {
        this.productIds = selection.map(item => item.shenyeShopId)
      },
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.shopTypeIdLs = []
        this.queryParams.pageNum = 1
        this.queryParams.keyword = ''
        this.queryParams.merchantLevel = ''
        this.queryParams.shenyeIndustryId = ''
        this.queryParams.shopTypeId = ''
        this.queryParams.shopTypeParentId = ''
        this.handleQuery();
      },
      /** 批量添加 */
      submitForm() {
        let data = {
          shopIdList: this.productIds,
          incentiveActivityId: this.queryParams.incentiveActivityId
        }
        this.saveLoading = true
        activityShopTempAdd(data).then(response => {
          this.$message.success('添加成功');
          this.$emit('refresh')
          this.cancel();
          this.saveLoading = false
        }).catch(() => {
          this.saveLoading = false
        });
      },
      /** 序号 */
      rowIndex({
        row,
        rowIndex
      }) {
        row.index = rowIndex + 1;
      },
    }
  };

</script>
<style scoped>
  .img_box {
    width: 100px;
    height: 70px;
    border-radius: 4px;
  }

  .flex {
    display: flex;
    align-items: center;
  }

</style>
